import React, { useState } from 'react'
import { Button, Form, Input, Modal } from 'antd';
import API from '../api';
import {useSelector} from 'react-redux';


function geTel(pass) {
    let passWord = ""
    String(pass).split("").forEach((item,index) => {
        if(index<2 || index>pass.length-5 || (index<pass.length-7 && index>pass.length-11)){
            passWord += item
        }else{
            passWord += "*"
        }
    })
    return passWord;
  }
export default function IdFind({ to_passFind }) {
    const languages = useSelector((state) =>state).publicReducer.language
    const onFinish = async (values) => {
        console.log('Success:', values);
        let res = await API.login()
        console.log(res,'res')
        let result = res.data.filter(item => item.username === values.name && item.phone === values.phone)
        console.log('result',result)
        if (result.length!==0) {
            setIsModalOpen(true)
            setStatus('true')
            console.log(status)
        } else {
            setStatus('false')
            setIsModalOpen(true)
            console.log(status,"6666")
        }
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const [isModalOpen, setIsModalOpen] = useState(false)
    const [status, setStatus] = useState('false')
    const handleCancel = () => {
        setIsModalOpen(false)
    }
    const handleOk = () => {
        setIsModalOpen(false)
    }
    return (
        <div className='idFind'>
            <Form
                name="basic"
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 14,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <section>{languages==="Korean"?"이름":(languages==="Chinese"?"姓名":"full name")}</section>
                <Form.Item
                    name="name"
                >
                    <Input placeholder={languages==="Korean"?'이름':(languages==="Chinese"?"姓名":"full name")} />
                </Form.Item>

                <section>{languages==="Korean"?"전화번호":(languages==="Chinese"?"电话号码":"Telephone number")}</section>
                <Form.Item
                    name="phone"
                >
                    <Input placeholder={languages==="Korean"?"전화번호":(languages==="Chinese"?"电话号码":"Telephone number")} />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 10,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                    {languages==="Korean"?"확인":(languages==="Chinese"?"确认":"confirm")}
                    </Button>
                </Form.Item>
            </Form>

            <Modal className='modal_id' open={isModalOpen} onCancel={handleCancel} onOk={handleOk} footer={null} centered>
                {
                    status==='true'
                    ?
                    <div className='success'>
                        <hgroup>{languages==="Korean"?"귀하의 ID는 다음과 같습니다.":(languages==="Chinese"?"您的ID如下":"Your ID is as follows:")}</hgroup>
                        <aside>{geTel("Hosacaspo@nacas.com") }</aside>
                        <Button onClick={handleCancel}>{languages==="Korean"?"확인":(languages==="Chinese"?"确认":"confirm")}</Button>
                        <Button onClick={() => to_passFind()}>{languages==="Korean"?"비밀번호 찾기":(languages==="Chinese"?"查找密码":"Find password")}</Button>
                    </div>
                    :
                    <div className='error'>
                        <aside>{languages==="Korean"?"입력하신 정보와 일치하는 ID를 찾을 수 없습니다.":(languages==="Chinese"?"找不到与您输入的信息匹配的ID。":"Cannot find an ID that matches the information you entered.")}</aside>
                        <Button onClick={handleCancel}>{languages==="Korean"?"확인":(languages==="Chinese"?"确认":"confirm")}</Button>
                    </div>
                }
            </Modal>
        </div>
    )
}
